<template>
    <div>
        <puzzle
            :canvaswidth="width"
            :canvasheight="height"
            :canvasimage="image"
            :blockx="x"
            :blocky="y"
            :initBlockLeft="kx"
            @finish="result"
        />
        <button @click="get">测试</button>
    </div>
</template>

<script>
import puzzle from './puzzle';
import request from './request';
import CryptoJS from 'crypto-js';
export default {
    name:'puzzle-verification',
    components: {
        puzzle
    },
    data() {
        return {
            iv:'',
            width: undefined,
            height: undefined,
            image: '',
            x: 0,
            y: 0,
            kx: 0
        };
    },
    methods: {
        async result(e) {
            const res = await request.get('md/image/verifyImageMove', {
                params: {
                    distance: e.distance,
                    clientId: 'kjhjkh',
                    startX: this.kx,
                    startY: this.y
                }
            });
            console.log(res);
        },
        decrypt(text) {
            let decrypted = CryptoJS.AES.decrypt(text, CryptoJS.enc.Utf8.parse('key'), {
                iv: CryptoJS.enc.Utf8.parse(this.iv),
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });
            return decrypted.toString(CryptoJS.enc.Utf8);
        },
        async get() {
            this.image = '';
            this.iv = new Date().toString();
            const res = await request.get('md/image/getImageVerifyCode?clientId=kjhjkh');
            let { imageUrl, width, height, cutX, x, y } = res.data;
            this.width = width;
            this.height = height;
            this.image = imageUrl;
            this.x = x;
            this.y = y;
            this.kx = cutX;
            console.log(cutX);
        }
    },
    mounted() {
        this.get();
    }
};
</script>

<style></style>
